<template>
  <page-detail>
    <div class="d-box">
      <div class="event-top" v-if="row.itemPublicityUrl">
        <img :src="row.itemPublicityUrl" />
      </div>
      <div class="event-container" :class="{ noimg: !row.itemPublicityUrl }">
        <div class="event-header">
          <h1>{{ row.itemTitle }}</h1>
          <p class="event-time">讲师：{{ row.itemPerson }}</p>
          <p class="event-time">时间：{{ row.itemStartTime }}</p>
          <p class="event-time">地点：{{ row.itemAddr }}</p>
        </div>
        <div class="event-description" v-html="row.itemContent"></div>
        <div class="title-tag" v-if="isAudit">
          {{
            row.approvalStatus === '0'
              ? `未审核.${row.itemScore}积分`
              : row.approvalStatus === '1'
              ? `已审核.${row.itemScore}积分`
              : `未通过.${row.itemScore}积分`
          }}
        </div>
        <div class="title-tag" v-else>
          {{
            isJT
              ? `${row.itemScore}积分`
              : row.itemStatus === '0'
              ? `待开始.${row.itemScore}积分`
              : row.itemStatus === '1'
              ? `进行中.${row.itemScore}积分`
              : `已结束.${row.itemScore}积分`
          }}
        </div>
      </div>
    </div>
    <template
      #footer
      v-if="
        (!isAudit && row.itemStatus === '1' && row.itemType === '2') ||
        (isAudit && row.approvalStatus === '0')
      "
    >
      <van-button
        round
        type="primary"
        style="width: 200px; flex: unset"
        @click="submit"
        v-if="
          !isSign && !isAudit && row.itemStatus === '1' && row.itemType === '2'
        "
        :disabled="isSign"
        >我要报名</van-button
      >
      <van-button
        round
        type="primary"
        style="width: 200px; flex: unset"
        @click="singnHandler"
        v-if="isSign"
        >签到</van-button
      >
      <van-button
        round
        type="primary"
        style="width: 200px"
        @click="audit('2')"
        v-if="isAudit && row.approvalStatus === '0'"
        plain
        >拒绝</van-button
      >
      <van-button
        round
        type="primary"
        style="width: 200px"
        @click="audit('1')"
        v-if="isAudit && row.approvalStatus === '0'"
        >通过</van-button
      >
    </template>
    <activity-detail-submit
      ref="activity"
      :appointment-type="row.itemType"
      :item-title="row.itemTitle"
      :item-index-code="row.indexCode"
    />
    <van-dialog
      v-model="show"
      title="审批"
      show-cancel-button
      @confirm="confirm"
    >
      <van-field
        v-model="approvalContent"
        rows="2"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入"
        show-word-limit
      />
    </van-dialog>
  </page-detail>
</template>

<script>
import ActivityDetailSubmit from './components/ActivityDetailSubmit.vue'
import {
  searchApprovalstatus,
  tbMoralEducationList,
} from '../../api/tbMoralEducation'
import { approvalItem, signInActivities } from '../../api/flow'
import { Dialog, Toast } from 'vant'
import { mapGetters } from 'vuex'
import { tbAppointmentSave } from '../../api/tbAppointment'
import { putVideoAndImage } from '../../utils/utils'
import moment from 'moment'
export default {
  name: 'wx_pages_djzh_activityDetail',
  components: { ActivityDetailSubmit },
  data() {
    return {
      isAudit:
        this.$route.query.isAudit && JSON.parse(this.$route.query.isAudit),
      row: {
        itemScore: '',
      },
      show: false,
      approvalContent: '',
      isSign: false,
      // 是否报名
      isSignUp: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    // 是否讲堂
    isJT() {
      return this.row.itemType === '1'
    },
  },
  methods: {
    singnHandler() {
      this.$toPage(`/pages/signIn?id=${this.row.indexCode}`)
    },
    submit() {
      const _this = this
      const { itemType, itemTitle, indexCode } = _this.row
      const formData = {
        appointmentType: itemType,
        itemIndexCode: indexCode,
        appointmentUserId: _this.userInfo.userId,
        appointmentName: itemTitle,
        appointmentPersonName: _this.userInfo.personName,
        appointmentPhone: _this.userInfo.phone,
      }
      Dialog.confirm({
        title: '提示',
        message: '是否确认提交?',
      })
        .then(() => {
          _this.$showLoading('提交中...')
          tbAppointmentSave(formData)
            .then(() => {
              _this.$hideLoading()
              _this.show = false
              this.search()
              Toast.success('提交成功')
            })
            .catch(() => {
              _this.$hideLoading()
            })
        })
        .catch(() => {})
    },
    async search() {
      const { indexCode } = this.$route.query
      if (indexCode) {
        this.$showLoading('查询中...')
        let res = await tbMoralEducationList({ indexCode })
        this.$hideLoading()
        if (res.data && res.data.length > 0) {
          this.row = res.data[0]
          if (this.row.itemContent) {
            this.row.itemContent = putVideoAndImage(this.row.itemContent)
          }

          // 讲堂签到
          if (this.row.itemType === '1') {
            signInActivities({
              indexCode,
              userId: this.userInfo.userId,
            })
          }
          // 活动签到
          if (this.row.itemType === '2') {
            // 查询是否已签到
            searchApprovalstatus({
              indexCode,
              userId: this.userInfo.userId,
            }).then((res) => {
              this.isSign = res.data
              this.isSignUp = res.data
            })
          }
        } else {
          this.row = {}
        }
      }
    },
    audit(approvalResult) {
      const _this = this
      if (approvalResult === '1') {
        const { itemType, indexCode } = _this.row
        Dialog.confirm({
          title: '提示',
          message: '是否确认通过?',
        })
          .then(async () => {
            _this.$showLoading('提交中...')
            await approvalItem({
              approvalResult,
              approvalIndexCode: indexCode,
              approvalType: itemType,
            })
            _this.$hideLoading()
            _this.search()
            Toast.success('提交成功')
          })
          .catch(() => {})
      } else {
        this.show = true
      }
    },
    async confirm() {
      const _this = this
      const { itemType, indexCode } = _this.row
      _this.$showLoading('提交中...')
      await approvalItem({
        approvalResult: '2',
        approvalIndexCode: indexCode,
        approvalType: itemType,
      })
      _this.$hideLoading()
      _this.search()
      Toast.success('提交成功')
    },
  },
  onLoad() {
    this.search()
  },
}
</script>

<style lang="scss" scoped>
.d-box {
  .event-top {
    height: 120px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .event-container {
    padding: 16px;
    border-radius: 18px 18px 0 0;
    background-color: #fff;
    margin-top: -20px;
    z-index: 1;
    position: relative;
    &.noimg {
      margin-top: -10px;
    }
    .event-header {
      margin-bottom: 30px;
      width: 70%;
      h1 {
        font-size: 22px;
        color: $uni-color-primary;
        margin-bottom: 8px;
      }
      .event-time {
        font-size: 14px;
        color: #666;
        line-height: 26px;
      }
    }
    .title-tag {
      height: 30px;
      line-height: 30px;
      padding: 0 12px 0 20px;
      color: #ffe9a3;
      position: absolute;
      right: 0;
      top: 20px;
      background: url('../../static/image/title-bg.png');
      background-size: 100% 100%;
    }
    .event-description {
      font-size: 16px;
      line-height: 1.5;
      color: #444;
    }
  }
}
</style>
